import React, { useEffect } from 'react';
import Header from '../../components/Header'
import {Form, Input, Button} from 'antd-mobile'
import { connect } from 'react-redux';
import {REQUEST_LOGIN} from '../../store/types'
import { useNavigate } from 'react-router-dom';
const Index = ({login, loginState}) => {

  const navigate = useNavigate()

  useEffect(()=>{
    // console.log('loginState更新成功');
    if(loginState){
      navigate('/home')
    }
  }, [loginState,navigate])

  return (
    <div className='box'>
      <Header  title='登录' />

      <div className='content'>
        <Form
        requiredMarkStyle='asterisk'
        onFinish={(values)=>{
          // console.log('1111111', values);
          login(values)

        }}
        footer={
          <Button block type='submit' color='danger' size='large'>
            登录
          </Button>
        }>
          <Form.Item name='loginname' label='用户名' rules={[{ required: true }]}>
            <Input placeholder='请输入姓名' />
          </Form.Item>
          <Form.Item name='password' label='密码'>
            <Input placeholder='请输入密码' type={'password'} />
          </Form.Item>
        </Form>
      </div>

    </div>
  );
};

export default connect((state)=>{
  return {
    loginState: state.getIn(['user', 'loginState'])
  }
},(dispatch)=>{
  return {
    login(data){
      // console.log('22222222222222');
      // 触发数据请求的时候要将用户名和密码传递过去
      dispatch({type: REQUEST_LOGIN,payload: data})
    }
  }
})(Index)
